<template>
  <div>
    <div class="apply">
      <img :src="product.img" alt="" class="applyImg">
      <div class="fl">
        <h6>{{product.name}}</h6>
        <p>零售价：¥ {{product.price}}</p>
        <p>防伪码：{{product.code}}</p>
        <div class="time">绑定时间：{{product.detaline}}</div>
      </div>
    </div>

    <div class="upd" style="position: relative;">
      <p class="ticket">发票/小票</p>
      <p v-if="src != ''" class="invoice" :style="bacSrc" style="margin: 12px 24px;" @click="showImg"></p>
      <span v-else class="span">
        点击上传产品购买时的发票/小票或网站订单截图，支持JPG/JPEG/PNG，5M以内
        <!-- @change="getimg" -->
        <input type="file" @change="getimg" class="fileImg" accept="image/*">

      </span>
      <!--  @click="hideImg" v-show="src" -->
      <!-- <div class="closeBtn" @click="hideImg" v-show="src">

        <img src="../../assets/images/delete_result-fapiao.png" alt="">

      </div> -->
    </div>

    <div class="content">
      <textarea type="text" class="explain" maxlength="100" v-model="text" placeholder="请填写售后说明，描述售后原因（10-100字）"></textarea>
      <div class="fillbtn">
        <span class="name">姓名</span>
        <input type="text" class="nameinp" placeholder="请输入正确的姓名" v-model="name">
      </div>
      <div class="fillbtn">
        <span class="phone">手机</span>
        <input type="number" class="num" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="请输入正确的手机号" v-model="phone">
      </div>
    </div>

    <div class="sub" @click="submitdata" :class="{'active': btnStatus}">提交申请</div>
    <div v-show="imgshow" class="imgshow" @click="hidebox">
      <img :src="src" alt="" width='100%'>
    </div>
    <div class="popup" v-show="errToopltip">{{errMsg}}</div>
    <toast :type="type" v-show="load">{{msg}}</toast>
  </div>
</template>

<script>
import toast from "../loading/loading";
export default {
  data() {
    return {
      msg: "处理中",
      type: "loading",
      load: false,
      id: "",
      src: "",
      imgshow: false,
      pattern: new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
      ),
      phoneReg: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      name: "",
      phone: "",
      text: "",
      productId: "",
      code: "",
      errMsg: "",
      errToopltip: false,
      errinfo: {
        name: {
          bol: false,
          text: "请输入姓名"
        },
        phone: {
          bol: false,
          text: "请输入正确的手机号"
        },
        text: {
          bol: false,
          text: "请输入10-100字的售后说明"
        }
      }
    };
  },
  components: {
    toast
  },
  watch: {
    name(e) {
      if (!e) {
        this.errinfo.name.bol = false;
      } else {
        this.errinfo.name.bol = true;
      }
    },
    phone(e) {
      if (!this.phoneReg.test(e)) {
        this.errinfo.phone.bol = false;
      } else {
        this.errinfo.phone.bol = true;
      }
    },
    text(e) {
      if (e.length < 10 || e.length > 100) {
        this.errinfo.text.bol = false;
      } else {
        this.errinfo.text.bol = true;
      }
    }
  },
  computed: {
    bacSrc() {
      if (this.src) {
        return {
          background: "url(" + this.src + ") no-repeat center center",
          backgroundSize: "100%"
        };
      }
    },
    btnStatus() {
      return Boolean(
        this.errinfo.name.bol &&
          this.errinfo.phone.bol &&
          this.src &&
          this.errinfo.text.bol &&
          this.text.length >= 10
      );
    },
    product() {
      return JSON.parse(this.$route.query.product);
    }
    // checkPhone() {
    //   return this.phoneReg.test(this.phone);
    // }
  },
  mounted() {
    var productId = JSON.parse(this.$route.query.product).id;
    var invoice_img = JSON.parse(this.$route.query.product).invoice_img;
    var code = this.$route.query.code;
    this.productId = productId;
    this.code = code;
    this.src = invoice_img;
    console.log(this.src);
    var cookie = document.cookie.split(";");
    var cookies = [];
    for (var i = 0; i < cookie.length; i++) {
      var temp = cookie[i].trim().split("=");
      cookies[temp[0]] = temp[1];
    }
    // console.log(cookies);
    var id = cookies["id"];
    // alert(id);
    if (!id) {
      window.location.href = "http://wztest.wofew.com/api/Main/login";
    } else {
      this.id = id;
      this.getUserInfo();
    }
    // this.userLogin();
  },
  methods: {
    hidebox() {
      this.imgshow = false;
    },
    hideImg() {
      this.src = "";
    },
    showImg() {
      this.imgshow = true;
    },
    submitdata() {
      var that = this;
      // if (!this.checkPhone) {
      //   this.errToopltip = true;
      //   this.errMsg = "手机格式不正确";
      //   setTimeout(() => {
      //     that.errToopltip = false;
      //   }, 2000);
      //   return;
      // }
      if (!this.errinfo.text.bol) {
        this.errMsg = this.errinfo.text.text;
        that.errToopltip = true;
        setTimeout(() => {
          that.errToopltip = false;
        }, 2000);
        return;
      }
      if (!this.errinfo.name.bol) {
        this.errMsg = this.errinfo.name.text;
        that.errToopltip = true;
        setTimeout(() => {
          that.errToopltip = false;
        }, 2000);
        return;
      }
      if (!this.errinfo.phone.bol) {
        this.errMsg = this.errinfo.phone.text;
        that.errToopltip = true;
        setTimeout(() => {
          that.errToopltip = false;
        }, 2000);
        return;
      }
      // if (!this.btnStatus) {
      //   this.errToopltip = true;
      //   this.errMsg = "请输入10到100字";
      //   setTimeout(() => {
      //     that.errToopltip = false;
      //   }, 2000);
      //   return;
      // }
      this.load = true;
      $.ajax({
        type: "post",
        data: {
          user_id: that.id,
          product_id: that.productId,
          code: that.code,
          img: this.src,
          img_s: this.src,
          note: this.text,
          name: this.name,
          phone: this.phone
        },
        url: `${this.$store.state.globalIp}/api/Main/a_sale_apply`,
        dataType: "json",
        success(result) {
          if ((result.message = "成功")) {
            var data = {
              orderId: result.data
            };
            setTimeout(() => {
              that.type = "";
              that.msg = "处理成功";
            }, 1000);
            setTimeout(() => {
              that.load = false;
              that.$router.replace({ path: "details", query: data });
            }, 2000);
          }
        }
      });
    },
    getimg() {
      this.src = "";
      var file = document.querySelector("input[type=file]").files[0];
      var reader = new FileReader();
      var that = this;
      reader.addEventListener(
        "load",
        function() {
          that.src = reader.result;
        },
        false
      );
      if (file) {
        reader.readAsDataURL(file);
      }
    },
    getUserInfo() {
      var data = {
        user_id: this.id
      };
      var that = this;
      $.ajax({
        type: "get",
        data: data,
        url: `${this.$store.state.globalIp}/api/Main/user_msg`,
        dataType: "json",
        success(result) {
          console.log(result);
          if (result.message == "成功") {
            that.name = result.data.name;
            that.phone = result.data.phone;
          }
        }
      });
    }
    //  userLogin() {
    //   var that = this;
    //   $.ajax({
    //     type: "get",
    //     url: `${this.$store.state.globalIp}/api/Main/login`,
    //     data: {

    //     },
    //     dataType: "json",
    //     success(result) {
    //       if (result.message == "成功") {
    //         var data = result.data;
    //        //在这里得到id
    //        var id=result.data.id;
    //       that.id=id;
    //       } else {

    //       }
    //     }
    //   });
    // }
  }
};
</script>

<style scoped>
.imgshow {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
}
.imgshow > img {
  position: absolute;
  top: 39%;
  left: 0;
  transform: translateY(-50%);
}
.apply {
  width: 351px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
  padding-bottom: 10px;
}
.invoice {
  width: 303px;
  height: 100px;
  background-size: 100%;
}
.applyImg {
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  /* background-color: lavenderblush; */
  margin: 12px;
}
.fl {
  /* float: left; */
}
.fl h6 {
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 12px;
}
.fl p {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 8px;
}
.time {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
  margin-top: 8px;
}

.billbox {
  width: 351px;
  height: 156px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
}
.billbox .receipt {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  display: inline-block;
  margin-left: -102px;
  margin-top: 12px;
}
.imgbox {
  width: 303px;
  height: 100px;
  background: rgba(242, 242, 242, 1);
  border-radius: 5px;
  margin-left: 23px;
  margin-top: 12px;
}
.imgbox span {
  width: 255px;
  height: 60px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
  display: block;
  padding: 20px 24px;
}
.content {
  width: 351px;
  height: 263px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 0px 12px;
}
.explain {
  width: 327px;
  height: 80px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  outline: none;
  margin: 24px 12px 0px 12px;
  padding: 10px;
  font-size: 14px;
  line-height: 20px;
}
.fillbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 327px;
  height: 44px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin: 12px 12px 0px 12px;
}
.fillbtn > input {
  width: auto;
  flex: 1;
}
.fillbtn:first-child {
  margin-top: 24px;
}
.name,
.phone {
  display: inline-block;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin: 12px;
}
.nameinp,
.num {
  width: 263px;
  height: 20px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  outline: none;
  border: 0;
}
.sub {
  width: 327px;
  height: 44px;
  background: rgba(187, 187, 187, 1);
  border-radius: 5px;
  font-size: 18px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  line-height: 44px;
  text-align: center;
  margin: 24px 24px 49px 24px;
}

.upd {
  padding-top: 10px;
  width: 351px;
  height: 156px;
  background: #fff;
  border-radius: 5px;
  margin: 0px 12px 12px 12px;
  box-sizing: border-box;
}
.ticket {
  margin-left: 23px;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
}
.upd .span {
  display: block;
  width: 303px;
  height: 100px;
  color: rgba(153, 153, 153, 1);
  margin: 20px 24px;
  font-size: 14px;
  line-height: 20px;
}
.fileImg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}
.closeBtn {
  margin-left: 296px;
  margin-top: -110px;
}
.active {
  background: #000;
}
.popup {
  width: 245px;
  height: 44px;
  background: rgba(40,40,40,.75);
  border-radius: 5px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  color: rgba(255, 255, 255, 1);
  line-height: 44px;
  text-align: center;
  /* margin: 0 auto; */
  position: fixed;
  left: 68px;
  top: 280px;
}
</style>
